<template>
  <div id="calendar">
    <div class="content">
      <EasyScrollbar :barOption="timeBar">
        <ul :class="[history_type==='month'?'':'disabled','month-list']">
          <li v-for="month in monthList" :class="{active:parseInt(curMonth) === parseInt(month)}" @click="setCurMonth(month)">{{month}} 月
          </li>
        </ul>
      </EasyScrollbar>
      <EasyScrollbar :barOption="timeBar">
        <ul class="year-list">
          <li v-for="year in yearList" :class="{active:curYear === year}" @click="setCurYear(year)">{{year}}</li>
        </ul>
      </EasyScrollbar>
    </div>
    <div class="confirm">
      <span class="right-btn" @click="confirmBtn(true)"></span>
      <span class="error-btn" @click="confirmBtn(false)"></span>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    name: 'Calendar',
    data () {
      return {
        monthList: [],
        yearList: [],
        curMonth: null,  //当前月
        curYear: null,   //当前年
        timeBar: {
          barColor: "#344757",   //滚动条颜色
          barWidth: 4,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 0,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.2,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        }
      }
    },
    mounted(){
      this.setDateList();
    },
    computed: {
      ...mapGetters(['history_type', 'history_time'])
    },
    methods: {
      ...mapMutations(['updateHistoryTime']),
      setDateList(){
        let date = new Date;
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if(this.history_time.month === 0) this.updateHistoryTime({year:year,month:month<10?'0'+parseInt(month):month});
        this.curYear = year;
        this.curMonth = month;
        for (let i = 10; i > 0; i--) {
          this.yearList.push(year - i + 1);
        }
        for (let i = 0; i < 12; i++) {
          this.monthList.push(i + 1);
        }
      },
      setCurMonth(month){
        if (this.history_type === 'month') {
          this.curMonth = month;
        } else {
          return;
        }
      },
      setCurYear(year){
        this.curYear = year;
      },
      confirmBtn(bool){
        if (bool) {
          if (this.history_type === 'year') {
            this.updateHistoryTime({year: this.curYear});
          } else {
            this.updateHistoryTime({year: this.curYear, month: this.curMonth<10?'0'+parseInt(this.curMonth):this.curMonth});
          }
        }else{
          this.curYear = this.history_time.year;
          this.curMonth = this.history_time.month;
        }
        this.$emit('calendarOp', bool);
      },
    },
    watch:{
      history_time(curVal,oldVal){
        if (curVal != oldVal) {
            this.curYear = curVal.year;
            this.curMonth = curVal.month;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/common.scss";

  #calendar {
    position: absolute;
    top: 18px;
    left: 0px;
    z-index: 1000;
    width: 190px;
    height: 337px;
    background-color: #35495a;
    border: solid 1px #1e1e1e;
    .content {
      width: 100%;
      height: 300px;
      box-sizing: border-box;
      display: flex;
      font-size: 15px;
      font-weight: bold;
      .month-list {
        flex-grow: 1;
        width: 116px;
        height: 300px;
        list-style: none;
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        border-right: solid 1px #1e1e1e;
        &.disabled {
          cursor: not-allowed;
          opacity: 0.6;
        }
        li {
          height: 40px;
          line-height: 40px;
          &.active {
            background-color: $bg-highlight;
            color: #1e1e1e;
          }
        }
      }
      .year-list {
        flex-grow: 1;
        width: 70px;
        height: 300px;
        list-style: none;
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        li {
          height: 40px;
          line-height: 40px;
          &.active {
            background-color: $bg-highlight;
            color: #1e1e1e;
          }
        }
      }
    }
    .confirm {
      width: 100%;
      height: 34px;
      border-top: solid 1px #1e1e1e;
      display: flex;
      span{
        &:hover{
          background-color: #314455;
        }
      }
      .right-btn {
        flex-grow: 1;
        background: url("../../../../static/images/confirm/right-f.png") no-repeat center;
        border-right: solid 1px #1e1e1e;
      }
      .error-btn {
        flex-grow: 1;
        background: url("../../../../static/images/confirm/error-f.png") no-repeat center;
      }
    }
  }
</style>
